<template>
  <el-dialog title="日期选择" :visible.sync="detailsvisible" :before-close="handleClose">
    <div class="block flex-center">
      <el-row :gutter="20">
        <el-col :span="14">
          <div style="height: 40px;display: flex;align-items: center;">
            <label style="width: 95px;text-align: right;">日期选择：</label>
            <el-date-picker v-model="ruleForm.time" type="date" placeholder="选择日期"
            format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
          </div>
        </el-col>
        <el-col :span="10">
          <div style="height: 40px;display: flex;align-items: center;">
            <el-radio v-model="ruleForm.excludeReason" label="休息">休息</el-radio>
            <el-radio v-model="ruleForm.excludeReason" label="上班">上班</el-radio>
          </div>
        </el-col>
        <el-col :span="24">
          <div style="height: 40px;display: flex;margin: 20px 0;align-items: center;">
            <label style="width: 100px;text-align: right;">备注：</label>
            <el-input class="input-item" v-model="ruleForm.remarks" placeholder="请输入" maxlength="25"></el-input>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="login-btn flex-center">
      <el-button class="Register" @click="handleClose()">取消</el-button>
      <el-button type="primary" @click="submitForm()">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'selectDay',
  data () {
    return {
      ruleForm: {
        time: '',
        excludeReason: '休息',
        remarks: ''
      },
      detailsvisible: false
    };
  },
  mounted () {
  },
  methods: {
    info () {
      this.detailsvisible = true
    },
    // 保存
    submitForm () {
      if (this.ruleForm.time) {
        this.$emit('getTime', this.ruleForm)
        this.handleClose()
      } else {
        this.$message.warning('请选择时间！')
      }
    },
    // 关闭弹框
    handleClose () {
      this.ruleForm = {
        time: '',
        excludeReason: '休息',
        remarks: ''
      }
      this.detailsvisible = false
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/.el-date-editor.el-input{margin-right: 20px;}
/deep/.el-dialog{width: 30% !important;margin-top: 30vh !important;}
.el-dialog{}
.login-btn{margin-top: 20px;}
</style>
